<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
      <h2 class="navbar-title">健康饮食订餐管理系统-商家端</h2>
      <ul class="nav-menu">
        <li
          v-for="item in menuItems"
          :key="item.path"
          :class="{ active: $route.path === item.path }"
          @click="navigateTo(item.path)"
          class="sidebar-item"
        >
          {{ item.title }}
        </li>
      </ul>
    </nav>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
    
    <!-- 登录注册模态框 -->
    <LoginRegisterModal
      :visible="isLoginModalVisible"
      @register="handleRegister"
      @login="handleLogin"
      @toggle="toggleRegisterLogin"
      @close="closeLoginModal"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import LoginRegisterModal from './components/LoginRegisterModal.vue'

const router = useRouter()

const menuItems = computed(() => [
  { path: '/', title: '首页' },
  { path: '/dishes', title: '菜品信息' },
  { path: '/orders', title: '订单信息' },
  { path: '/customers', title: '客户信息' },
  { path: '/promotions', title: '促销活动' },
  { path: '/inventory', title: '库存信息' },
  { path: '/login', title: '登录/注册' }
])

const isLoginModalVisible = ref(false)

const navigateTo = (path) => {
  router.push(path)
}

const handleRegister = (username, password) => {
  const users = JSON.parse(localStorage.getItem('users')) || []
  const userExists = users.some(user => user.username === username)
  if (userExists) {
    alert('用户名已存在')
  } else {
    users.push({ username, password })
    localStorage.setItem('users', JSON.stringify(users))
    alert('注册成功，请登录')
  }
}

const handleLogin = (username, password) => {
  const users = JSON.parse(localStorage.getItem('users')) || []
  const user = users.find(user => user.username === username && user.password === password)
  if (user) {
    alert('登录成功')
    isLoginModalVisible.value = false
  } else {
    alert('用户名或密码错误')
  }
}

const toggleRegisterLogin = () => {
  // 切换逻辑
}

const closeLoginModal = () => {
  isLoginModalVisible.value = false
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.top-navbar {
  background-color: #007bff;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.nav-menu {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 20px;
}

.nav-menu .sidebar-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-bottom: 3px solid transparent;
  font-size: 16px;
}

.nav-menu .sidebar-item:hover,
.nav-menu .sidebar-item.active {
  background-color: #0056b3;
  border-bottom: 3px solid white;
}

.main-content {
  flex: 1;
  padding: 30px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

/* 过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-navbar {
    flex-direction: column;
    padding: 10px;
  }
  
  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  
  .main-content {
    padding: 15px;
  }
}
</style>